<template>
  <div class="commentBar">
    <van-field
      :value="msg"
      center
      clearable
      placeholder="  发条评论吧"
      maxlength="150"
      @change="
        ({ detail }) => {
          this.msg = detail;
        }
      ">
      <template
        #button
        v-if="msg.length > 0">
        <button
          class="btn-send"
          @click="sendMsg">
          发送
        </button>
      </template>
    </van-field>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    sendMsg() {
      console.log("sendMsg from child component", this.msg);
      this.$emit("sendMsg", this.msg);
      this.msg = "";
    },
  },
  // 解决在微信小程序中 样式穿透无效的问题
  options: {
    styleIsolation: "shared",
  },
};
</script>

<style lang="scss" scoped>
.commentBar {
  bottom: 24px;
  width: 100vw;
}
.btn-send {
  background-color: #409eff;
  color: #fff;
  border: none;
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
::v-deep .van-field__body {
  background-color: #f1f2f3 !important;
  color: #949aa3 !important;
  border-radius: 4px;
}
</style>
